<div id="root">
    <app>
        内容
        <template v-slot:navbar>头部内容</template>
        <template #main>主体内容</template>
        <template slot=tabbar>底部内容</template>
    </app>
</div>
<link rel="stylesheet" href="./qfui.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./qfui.js"></script>
<script>

Vue.component('app',{
    template:`<fieldset>
            <legend>app</legend>

            <h1>头部</h1>
            <slot name="navbar"></slot>

            <h1>主体</h1>
            <slot name="main"></slot>

            <h1>底部</h1>
            <slot name="tabbar"></slot>
            <hr/>
            <slot></slot>
        </fieldset>`,
})
const vm = new Vue({
    el: "#root",
    data: {
    }
})
</script>